import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View, Text } from '@tarojs/components'
import styles from './index.module.scss'
import { AtRate } from 'taro-ui'
import {formatTime, getFilter} from "@/utils/utils"
import classNames from 'classnames'
import { toCommentInfoPage } from '@/utils/page_router'
import headImg from "@/assets/icon/user-avatar.png";
import { FyImg } from "@/components/index"
interface IProps {
  list: any
  info: any
  className: string
}

/**
 * 商品评论
 */
export default class CommentGoods extends Component<IProps, {}> {
  props: any
  state: any

  static options = {
    // addGlobalClass: true
  }

  constructor () {
    super(...arguments)
    this.state = {
      info: {},
      list: []
    }
  }
  componentWillReceiveProps ({ info, list }) {
    list.map(item => {
      item.userInfo.nickName = getFilter(item.userInfo.nickName, 1, 0, '*')
    })
    this.setState({
      info: info,
      list: list
    })
  }

  //  查看图片
  onSeeImg(list, url, e) {
    e.stopPropagation()
    Taro.previewImage({ current: url, urls: list })
  }

  render() {
    const { info={}, list = [] }:any = this.state
    return (
      <View className={styles.commentTwo}>
        <View className={styles.head}>
          <View>用户评价({info.salesNumber})</View>
          {info.goodRate && <View>
            <Text className={styles.goodRate}>{info.goodRate}%</Text>
            好评率
          </View>}

        </View>
        <ScrollView scrollX className={styles.list}>
          { list.map(item => {
             return (<View className={classNames(styles.listItem)}>
               <View className={styles.listUser}>
                <FyImg src={item.portrait} className={classNames(styles.listImg)}/>
                <Text> {item.userInfo.nickName}</Text>
                 </View>
               <View className={classNames(styles.listText, 't-o-e-2')}>{item.comment}</View>
             </View>)
          }) }
        </ScrollView>
      </View>
    )
  }
}
